<template>
  <view class="container">
    <view class="card">
      <view class="header">
        <image class="avatar" :src="state.orderInfo?.head_img" />
        <view class="info">
          <text class="name">{{state.userInfo?.nickname}}</text>
          <text class="id">ID: {{state.userInfo?.id}}</text>
        </view>
      </view>
      <view class="stats">
        <view class="stat-item">
          <text class="span">{{state.orderInfo?.price || 0}}元</text>
          <text>总款项</text>
        </view>
        <view class="stat-item">
          <text class="span">{{state.orderInfo?.yet_price || 0}}元</text>
          <text>已支付</text>
        </view>
      </view>
      <CommonTitle  :isShowDing="false" :orderInfo="state.orderInfo"/>
      <view class="tiaokuan">
        <text @click="goToWebview">相关说明与条款</text>
        <uni-icons type="right" size="30" style="margin-right: 40rpx"></uni-icons>
      </view>
      <view class="contactMain">
        <button open-type="contact" class="btn" plain=""></button>
        <view class="contactBtn">联系客服</view>
      </view>
    </view>
  </view>
  <TabBar :active="2"/>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import TabBar from '@/components/tabBar.vue'
  import { getTeacherIndex } from '@/utils/teacher.js'
  import CommonTitle from '@/components/commonTitle.vue'
  
  const state = reactive({
    orderStat: null,
    userInfo: null,
    tags: [],
    orderInfo: {}
  })
  onShow(() => {
    state.orderInfo = uni.getStorageSync('orderInfo')
  })
  
  onLoad(() => {
    getTeacherInfo()
  })
  const getTeacherInfo = async() => {
    await getTeacherIndex({}).then((res) => {
      if (res?.code == 1) {
        state.userInfo = res.result?.user;
        state.orderStat = res.result?.stat; 
      }  
    })
  }
  const goToWebview = () => {
    uni.navigateTo({
      url: '/pages/webview/index?typeId=2'
    })
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 13rpx;
    background-color: rgba(209, 218, 243, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    // width: 750rpx;
  }
  .card {
    width: 682rpx;
    height: 1226rpx;
    margin-top: 300rpx;
    border-radius: 14rpx;
    background-color: rgba(247, 247, 247, 1);
    margin-bottom: 16px;
    padding: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  } 
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    flex-direction: column;
    margin-top: -100rpx;
  }
  
  .avatar {
    width: 254rpx;
    height: 254rpx;
    border-radius: 100%;
    // margin-right: 16px;
  }
  
  .info {
    font-size: 32rpx;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .name {
    font-family: HarmonyOS Sans SC;
    font-weight: 700;
    font-size: 40rpx;
    text-align: center;
    color: rgba(55, 55, 55, 1);
    margin-top: 20rpx;
  }
  
  .id {
    color: rgba(136, 136, 136, 1);
    font-family: HarmonyOS Sans SC;
    font-weight: 700;
    font-size: 28rpx;
    text-align: center;
  }
  
  .tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 32rpx;
    flex-direction: row;
  }
  
  .tag {
    color: rgba(11, 105, 218, 1);
    padding: 8rpx 16rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    font-size: 28rpx;
  }
  
  .stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 32rpx;
    width: 100%;
  }
  
  .stat-item {
    width: 214rpx;
    height:164rpx;
    background: linear-gradient(180deg, #E8EDF3 0%, #CFD8F3 100%);
    border-radius: 20rpx;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text{
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(35, 35, 35, .52);
      text-align: center;
    }
    .span{
      font-weight: 600;
      font-size: 48rpx;
      text-align: center;
      color: rgba(35, 35, 35, 1);
    }
  }
  .tiaokuan {
    width: 640rpx;
    height: 68rpx;
    border-radius: 20rpx;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: rgba(35, 35, 35, 1);
    cursor: pointer;
    margin-top: 60rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    text{
      margin-left: 40rpx;
    }
  }
  .contactMain{
    width: 640rpx;
    height: 100rpx;
    position: relative;
    margin-top: 40rpx;
    .btn{
      width: 100%;
      height: 100rpx;
      border: 2rpx solid transparent !important;
      position: absolute;
      background: transparent;
    }
    .contactBtn{
      width: 100%;
      height: 100rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      background: royalblue;
      border-radius: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>